<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/iconfont.css">
  </head>
  <body>
    <div class="nav">
      <div class="w">
        <div class="nav-left">
          <div class="nav-left-box">
            <a style="color: #3c3c3c; padding: 10px 7px" class="fc"
              >中国大陆<img src="img/下  拉.png" class="xiala"
            /></a>
          </div>
          <ul>
            <li><a href="">全球</a></li>
            <li><a href="">中国大陆</a></li>
            <li><a href="">中国香港</a></li>
          </ul>
          <a href="" style="color: #f22e15; margin-left: 5px">亲，请登录</a>
          <a href="taobao.html" style="margin-left: 5px">免费注册</a>
          <a href="" style="margin-left: 13px">手机逛淘宝</a>
        </div>
        <div class="nav-right">
          <ul>
            <li>
              <a href="" id="ap"">我的淘宝<img src="img/下  拉.png" class="xiala" /></a>
              <ul class="c1">
                <li><a href="">已买到的宝贝</a></li>
                <li><a href="">我的足迹</a></li>
              </ul>
            </li>
            <li>
              <a href="" style="padding: 0 1px"
                ><img
                  src="img/购物车.png"
                  style="width: 12px; margin-right: 3px" />&nbsp;购物车<img
                  src="img/下  拉.png"
                  class="xiala"
              /></a>
            </li>
            <li>
              <a href="" style="padding: 10px 5px;"
                ><img
                  src="img/收藏.png"
                  style="width: 12px; margin-right: 8px" />收藏夹<img
                  src="img/下  拉.png"
                  class="xiala"
              /></a>
              <ul class="c1">
                <li><a href="">收藏的宝贝</a></li>
                <li><a href="">收藏的店铺</a></li>
              </ul>
            </li>
            <li><a href="">商品分类</a></li>
            <li>
              <a
                href=""
                style="border-right: 2px solid #dddfe4; padding-right: 10px"
                >免费开店</a
              >
            </li>
            <li>
              <a href="" id="ap""
                >千牛卖家中心<img src="img/下  拉.png" class="xiala"
              /></a>
              <ul class="c1">
                <li><a href="">免费开店</a></li>
                <li><a href="">已卖出的宝贝</a></li>
                <li><a href="">出售中的宝贝</a></li>
                <li><a href="">卖家服务市场</a></li>
                <li><a href="">卖家培训中心</a></li>
                <li><a href="">体验中心</a></li>
                <li><a href="">问商友</a></li>
              </ul>
            </li>
            <li>
              <a href="" id="ap"">联系客服<img src="img/下  拉.png" class="xiala" /></a>
              <ul class="c1">
                <li><a href="">消费者客服</a></li>
                <li><a href="">商家服务大厅</a></li>
              </ul>
            </li>
            <li>
              <a href="" id="ap" style="padding: 11px 0;">
                <img src="img/nav.png" style="width: 10px; margin-right: 8px" />网站导航<img src="img/下  拉.png" class="xiala"/>
              </a>
              <!-- 网页导航 下拉菜单 -->
              <div class="nav-box w">
                <div class="nav-box-in">
                  <h4 style="color: #f34d00">主题市场</h4>
                  <ul class="in1">
                    <li>女装</li>
                    <li>男装</li>
                    <li>内衣</li>
                    <li>鞋靴</li>
                    <li>箱包</li>
                    <li>婴童</li>
                    <li>家电</li>
                    <li>数码</li>
                    <li>手机</li>
                    <li>美妆</li>
                    <li>珠宝</li>
                    <li>眼镜</li>
                    <li>手表</li>
                    <li>运动</li>
                    <li>户外</li>
                    <li>乐器</li>
                    <li>游戏</li>
                    <li>动漫</li>
                    <li>影视</li>
                    <li>美食</li>
                    <li>鲜花</li>
                    <li>宠物</li>
                    <li>农贸</li>
                    <li>房产</li>
                    <li>装修</li>
                    <li>建材</li>
                    <li>家具</li>
                    <li>百货</li>
                    <li>汽车</li>
                    <li style="padding:12px 10px; margin-left: 4px;">二手车</li>
                    <li style="padding:12px 10px;">办公</li>
                    <li>定制</li>
                    <li>教育</li>
                    <li>卡券</li>
                    <li>本地</li>
                  </ul>
                </div>
                <div class="nav-box-in">
                  <h4 style="color: #abbf50">特色市场</h4>
                  <ul class="in2">
                    <li><a>全球购</a></li>
                    <li><a>极有家</a></li>
                    <li><a>阿里拍卖</a></li>
                    <li><a>淘宝众筹</a></li>
                    <li><a>飞猪</a></li>
                    <li><a>农资</a></li>
                    <li><a>天天特卖</a></li>
                    <li><a>Outlets</a></li>
                    <li><a>淘抢购</a></li>
                    <li><a>试用</a></li>
                    <li><a>量贩团</a></li>
                    <li><a>阿里翻译</a></li>
                  </ul>
                </div>
                <div class="nav-box-in">
                  <h4 style="color: #ce5695">阿里app</h4>
                  <ul class="in2" style="width: 286px">
                    <li><a>淘宝</a></li>
                    <li><a>天猫</a></li>
                    <li><a>支付宝</a></li>
                    <li><a>聚划算</a></li>
                    <li><a>飞猪</a></li>
                    <li><a>蚂蚁聚宝</a></li>
                    <li><a>咸鱼</a></li>
                    <li><a>淘小镇</a></li>
                    <li><a>阿里钱盾</a></li>
                    <li><a>钉钉</a></li>
                    <li><a>高德地图</a></li>
                    <li><a>虾米音乐</a></li>
                    <li><a>淘票票</a></li>
                    <li><a>菜鸟裹裹</a></li>
                    <li><a>阿里云</a></li>
                    <li><a>网商银行</a></li>
                    <li><a>阿里邮箱</a></li>
                    <li><a>阿里众包</a></li>
                  </ul>
                </div>
                <div class="nav-box-in">
                  <h4 style="color: #50a4dc; border: 0; padding-right: 100px">
                    精彩推荐集
                  </h4>
                  <ul class="in3" style="border: 0">
                    <li><a>余额宝</a></li>
                    <li><a>大牌捡宝</a></li>
                    <li><a>淘公仔</a></li>
                    <li><a>浏览器</a></li>
                    <li><a>淘宝香港</a></li>
                    <li><a>淘宝台湾</a></li>
                    <li><a>淘宝全球</a></li>
                    <li><a>淘宝东南亚</a></li>
                    <li><a>闺蜜淘宝</a></li>
                    <li><a>大众评审</a></li>
                    <li><a>淘工作</a></li>
                    <li><a>阿里巴巴认证</a></li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="w">
        <div class="top">
          <img src="img/淘宝网2.png" alt="">
          <div class="redBox">
            <span>去领红包</span>
            <img src="img/erweima.png" alt="">
          </div>
          <div class="search">
            <div class="search-top">
              <span>宝贝<img src="img/下  拉.png" class="xiala"></span><input type="text" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中裤男夏">
              <button>搜索</button>
            </div>
            <ul>
              <li><a href="">新款连衣裙</a></li>
              <li><a href="">四件套</a></li>
              <li><a href="" style="color: #f34d00;">潮流T恤</a></li>
              <li><a href="">时尚女鞋</a></li>
              <li><a href="">短裤</a></li>
              <li><a href="">半身裙</a></li>
              <li><a href="">男士外套</a></li>
              <li><a href="">墙纸</a></li>
              <li><a href="">行车记录仪</a></li>
              <li><a href="">新款男鞋</a></li>
              <li><a href="">耳机</a></li>
              <li><a href="">时尚女包</a></li>
              <li><a href="">沙发</a></li>
            </ul>
          </div>
        </div>
        <div class="banner">
          <div class="bn-left">
            <span>主题市场</span>
            <ul>
              <li class="iconfont icon-youjiantou"><a href="">女装</a>/<a href="">内衣</a>/<a href="">家居</a></li>
              <li class="iconfont icon-youjiantou"><a href="">女鞋</a>/<a href="">男鞋</a>/<a href="">箱包</a></li>
              <li class="iconfont icon-youjiantou"><a href="">母婴</a>/<a href="">童装</a>/<a href="">玩具</a></li>
              <li class="iconfont icon-youjiantou"><a href="">男装</a>/<a href="">户外运动</a></li>
              <li class="iconfont icon-youjiantou"><a href="">美妆</a>/<a href="">彩妆</a>/<a href="">个护</a></li>
              <li class="iconfont icon-youjiantou"><a href="">手机</a>/<a href="">数码</a>/<a href="">企业</a></li>
              <li class="iconfont icon-youjiantou"><a href="">大家电</a>/<a href="">生活电器</a></li>
              <li class="iconfont icon-youjiantou"><a href="">零食</a>/<a href="">生鲜</a>/<a href="">茶酒</a></li>
              <li class="iconfont icon-youjiantou"><a href="">厨具</a>/<a href="">收纳</a>/<a href="">清洁</a></li>
              <li class="iconfont icon-youjiantou"><a href="">家纺</a>/<a href="">家饰</a>/<a href="">鲜花</a></li>
              <li class="iconfont icon-youjiantou"><a href="">图书音像</a>/<a href="">文具</a></li>
              <li class="iconfont icon-youjiantou"><a href="">医药保健</a>/<a href="">进口</a></li>
              <li class="iconfont icon-youjiantou"><a href="">汽车</a>/<a href="">二手车</a>/<a href="">用品</a></li>
              <li class="iconfont icon-youjiantou"><a href="">房产</a>/<a href="">装修家具</a>/<a href="">建材</a></li>
              <li class="iconfont icon-youjiantou"><a href="">手表</a>/<a href="">眼镜</a>/<a href="">珠宝饰品</a></li>
            </ul>
          </div>
          <div class="bn-right">
            <div class="bn-right-top">
              <span class="title">
                <a href="">天猫</a>
                <a href="">聚划算</a>
                <a href="" style="color: #54c845;">天猫超市</a>
              </span>|
              <a href="">司法拍卖</a>
              <a href="">飞猪旅行</a>
              <a href="">天天特卖</a>
              <a href="">淘小铺</a>|
              <a href="">造点新货</a>
              <a href="">苏宁易购</a>
              <a href="">淘宝心选</a>
              <a href="">智能生活</a>
            </div>
            <div class="bn-right-botton">
              <div class="bn-r-bn-left">
                <div class="carousel">
                  <img src="img/banner/1.jpg" style="display: block;">
                  <img src="img/banner/2.jpg">
                  <img src="img/banner/3.jpg">
                  <img src="img/banner/4.jpg">
                  <img src="img/banner/5.jpg">
                  <div class="carousel-left"></div>
                  <div class="carousel-right"></div>
                </div>
                <!-- <img src="//img.alicdn.com/imgextra/i4/6000000007764/O1CN01YYUE5n27DxjrqK7gz_!!6000000007764-0-octopus.jpg_290x290q90.jpg_.webp" alt="焦点图" style="margin-left: 10px;"> -->
                
                <img src="img/小图1.webp" alt="焦点图" style="margin-left: 10px;">
                <div class="bn-r-bn-left-box">
                  <img src="img/banner/tianmao.png" style="margin-top: 4px;float: left;">
                  <P>理想生活上天猫</P>
                  <p1 style="color: #f20d43;position:absolute;top: 5.5px;left: 490px;">5</p1><p2 style="color: #3c3c3c;position:absolute;top: 5.5px;left: 498px;">/5</p2>
                  <p style="float: right; margin-right: 110px;">近日特卖</p>
                </div>
                <div class="img-box">
                  <img src="img/中图1.jpg" width="250px">
                <img src="img/中图2.jpg" width="250px">
                </div>
                <img border="0" src="https://aecpm.alicdn.com/simba/img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg" width="155px" height="195px" style="float: right; margin: 0 6px 0 0;">
              </div>
              <div class="bn-r-bn-right">
                <div class="box-1" style="background: url(img/banner/用户背景.png);">
                  <img src="img/头像.jpg" style="margin: 5px 0 0 120px;border-radius: 30px;">
                  <p>Hi 你好</p>
                  <a href="" style="margin-left: 45px;"><img src="img/banner/图标/left.png" align="absmiddle">&nbsp;领淘金币抵钱</a>
                  <a href=""><img src="img/banner/图标/right.png" align="absmiddle">&nbsp;会员俱乐部</a>
                </div>
                <div class="box-2">
                  <a href="" style="margin-left: 25px;">登录</a>
                  <a href="">注册</a>
                  <a href="">开店</a>
                </div>
                <img src="img/banner/淘宝逛逛.jpg" width="300px">
                <div class="box-3">
                  <ul>
                    <li><a href="" style="border-bottom: 2px solid #f34100;">公告</a></li>
                    <li><a href="">规则</a></li>
                    <li><a href="">安全</a></li>
                    <li><a href="">公益</a></li>
                    <li><a href="">千牛</a></li>
                  </ul>
                  <p style="display: block;">关于加强卖家广告（含弹窗）合规宣传的广告</p>
                  <p>新增《淘宝网汽配行业《淘宝网区域零售服务</p>
                  <p>魔豆妈妈公益项目让母爱永不打烊！</p>
                  <p>阿里公益“奥斯卡”阿里公益论坛</p>
                  <p>千牛头条新手开店</p>
                </div>
                <div class="box-4">
                  <ul>
                    <li ><img src="img/banner/图标/1.png" alt=""><p>充话费</p></li>
                    <li><img src="img/banner/图标/3.png" alt=""><p style="margin-top: 5px;">旅行</p></li>
                    <li><img src="img/banner/图标/2.png" alt=""><p style="margin-top: 3px;">车险</p></li>
                    <li><img src="img/banner/图标/4.png" alt=""><p style="margin-top: 4px;">游戏</p></li>
                    <li style="border-top: 1px solid #f4f4f4;"><img src="img/banner/图标/5.png" alt=""><p>彩票</p></li>
                    <li style="border-top: 1px solid #f4f4f4;"><img src="img/banner/图标/6.png" alt=""><p style="margin-top: 5px;">电影</p></li>
                    <li style="border-top: 1px solid #f4f4f4;"><img src="img/banner/图标/7.png" alt=""><p>酒店</p></li>
                    <li style="border-top: 1px solid #f4f4f4;width: 86px;"><img src="img/banner/图标/8.png" alt=""><p style="margin-top: 5px;">理财</p></li>
                  </ul>
                  <p>阿里<strong>APP</strong></p><a href="">更多<span class="xiala">></span></a><br>
                  <img src="img/banner/app/1.jfif" alt="">
                  <img src="img/banner/app/2.png" alt="">
                  <img src="img/banner/app/3.png" alt="">
                  <img src="img/banner/app/4.png" alt="">
                  <img src="img/banner/app/5.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu">
      <img src="img/banner/图标/精灵.png" width="50px" style="margin-left: 5px;">
      <ul>
        <li style="border-top-left-radius: 10px;border-top-right-radius: 10px;background-image: linear-gradient(to right,#f57900,#f35300);"><a href="" style="color: white;">品质<br>好货</a></li>
        <li><a href="" style="color: #f34100;">猜你<br>喜欢</a></li>
        <li><a href="">反馈</a></li>
        <li style="border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;"><a href="">暴恐<br>举报</a></li>
      </ul>
    </div>
    <script>
      // 中国大陆下拉
      var fc = document.querySelector(".fc");
      var fclist = document.querySelector(".nav-left>ul");
      var fcitem = document.querySelectorAll(".nav-left>ul>li");
      fc.addEventListener("mouseover", function () {
        fc.className = "fc-2";
        fclist.style.display = "block";
        for (let i = 0; i < fcitem.length; i++) {
          const element = fcitem[i];
          element.addEventListener("mouseover", function () {
            fc.className = "fc-2";
            fclist.style.display = "block";
          });
        }
        for (let i = 0; i < fcitem.length; i++) {
          const element = fcitem[i];
          element.addEventListener("mouseout", function () {
            fc.className = "fc-1";
            fclist.style.display = "none";
          });
        }
      });
      fc.addEventListener("mouseout", function () {
        fc.className = "fc-1";
        fclist.style.display = "none";
      });
      // 多个菜单
      var c1 = document.querySelectorAll(".nav-right>ul>li>a");
      for (let i = 0; i < c1.length; i++) {
        c1[i].addEventListener('mouseover',function () {
          if (i == 0 || i == 2 || i == 5 || i == 6) {
            var c1List = c1[i].nextElementSibling;
            c1List.style.display = "block";
            c1[i].className = 'fc-2';
            var inc1List = c1List.children;
            for (let j = 0; j < inc1List.length; j++) {
              const element = inc1List[j];
              element.addEventListener('mouseover',function () {
                c1[i].className = 'fc-2';
                c1List.style.display = "block";
              })
            }
            for (let j = 0; j < inc1List.length; j++) {
              const element = inc1List[j];
              element.addEventListener('mouseout',function () {
                c1[i].className = 'fc-1';
                c1List.style.display = "none";
              })
            }
        }
        })
        c1[i].addEventListener('mouseout',function () {
          if (i == 0 || i == 2 || i == 5 || i == 6) {
            var c1List = c1[i].nextElementSibling;
            c1List.style.display = "none";
            c1[i].className = 'fc-1';
        }
        })
      }
      var webNav = c1[7];
      var navList = document.querySelector('.nav-box');
      webNav.addEventListener('mouseover',function () {
        webNav.className = 'fc-2';
        navList.style.display = 'block';
        var inbox = document.querySelectorAll('.nav-box-in');
        for (let i = 0; i < inbox.length; i++) {
          const element = inbox[i];
          element.addEventListener('mouseover',function () {
            webNav.className = 'fc-2';
            navList.style.display = 'block';
          })
          element.addEventListener('mouseout',function () {
            webNav.className = 'fc-1';
            navList.style.display = 'none';
          })
        }
      })
      webNav.addEventListener('mouseout',function () {
        webNav.className = 'fc-1';
        navList.style.display = 'none';
      })

      //红包点击事件
      var redBox = document.querySelector('.redBox');
      redBox.addEventListener('click',function () {
        redBox.nextElementSibling.style.margin='30px 295px 0 0';
        redBox.style.display = 'none';
      })
      //轮播效果(2秒)
      var bg = document.querySelectorAll('.carousel>img');
      console.log(bg);
      function lunBo() {
        let k = 1;
        var clock = setInterval(() => {
          for (let i = 0; i < bg.length; i++) {
            const element = bg[i];
            element.style.display = 'none';
          }
          bg[k].style.display='block';
          k++;
          if(k==5){
            k=0;
          }
        }, 2000);
      }
      lunBo();

      //单击效果
      var left = document.querySelector('.carousel-left');
      left.addEventListener('click',function () {
        for (let i = 0; i < bg.length; i++) {
          const element = bg[i];
          if(element.style.display == 'block'){
            bg[i].style.display = 'none';
            // bg[i-1].style.display = 'block';
            if(i==0){
              bg[bg.length-1].style.display = 'block';
              break;
            }else{
              bg[i-1].style.display = 'block';
            }
          }
        }
      })
      var right = document.querySelector('.carousel-right');
      right.addEventListener('click',function () {
        for (let i = 0; i < bg.length; i++) {
          const element = bg[i];
          if(element.style.display == 'block'){
            bg[i].style.display = 'none';
            // bg[i-1].style.display = 'block';
            if(i==4){
              bg[0].style.display = 'block';
            }else{
              bg[i+1].style.display = 'block';
              break;
            }
          }
        }
      })

      //search框
      var search = document.querySelector('.search-top>input');
      search.addEventListener('keyup',function () {
          if(search.value ==''){
            console.log('为空');
            search.style.background = 'url(img/照相机.png) no-repeat right,url(img/搜索.png) no-repeat left';
            // search.className = 'searchInput';
            search.style.backgroundSize = '30px';
          }else{
            console.log(search.value);
            search.style.background = 'url(img/照相机.png) no-repeat right';
            search.style.backgroundSize = '30px';
          }
      })

      //font-change
      var box3 = document.querySelectorAll('.box-3>ul>li');
      var box3_p = document.querySelectorAll('.box-3>p');
      for (let j = 0; j < box3.length; j++) {
        const element = box3[j];
        element.addEventListener('mouseover',function () {
          box3[0].children[0].style.border = '0';
          for (let t = 0; t < box3_p.length; t++) {
            const element = box3_p[t];
            element.style.display = 'none';
            box3[t].children[0].style.border = '0';
          }
          box3_p[j].style.display = 'block';
          box3[j].children[0].style.borderBottom = '2px solid #f34100';
        })
        element.addEventListener('mouseout',function () {
          box3[j].children[0].style.borderBottom = '2px solid #f34100';
        })
      }
    </script>
  </body>
</html>
